<template>
	<view style="width: 100vw;">
		<view class='left'>
			<scroll-view scroll-y="true" style="height:100%;">
				<view v-for="(item,index) in menulist" :key="index">
					<view :class="[currentTab==index?'menu active':'menu']" @click="swichNav(index)">
						<view class='menu_left' v-if="currentTab==index?true:false"></view>
						<view class='menu_text' :style="{'font-size':clientType=='pda'?'18px':'14px'}">{{item.menuname}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class='right'>
			<scroll-view scroll-y="true" style="height:92%;">
				<view v-if="menus[0] != undefined && JSON.stringify(menus[0].children) != undefined" class='cq_nav1'>
					<view v-for="(item,index) in menus" :key="index">
						<view style='height:8%;width:100%;margin: 10px 20px;'>{{item.menuname}}</view>
						<view class="cq_nav">
							<view v-for="(item2, index2) in item.children" :key="index2">
								<view class='cq_nav_item' @click='onItemClick(index,index2)'>
									<image class='cq_nav_item_image' :src='item2.piciconurl'></image>
									<text class='cq_nav_item_text' :style="{'font-size':clientType=='pda'?'16px':'10px'}">{{item2.menuname}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-else class='cq_nav'>
					<view  v-for="(item,index) in menus" :key="index">
						<view class='cq_nav_item' @click='onItemClick(0,index)'>
							<image class='cq_nav_item_image' :src='item.piciconurl'></image>
							<text class='cq_nav_item_text' :style="{'font-size':clientType=='pda'?'16px':'10px'}">{{item.menuname}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<tabbar :value2='1'></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue"
	export default {
		components:{
			tabbar:tabbar
		},
		data() {
			return {
				menus: [],
				menulist: [],
				currentTab: 0,
				itemname: '',
				modcode2: '',
				divArea:'',
				dataObject:'',
				pageConditions:{"pageNumber": 1,"rowsPerPage": 20,"isAllData": true},
				clientType:''
			}
		},

		onLoad: function(options) {
			uni.hideTabBar()
			this.clientType = uni.getStorageSync('clientType')
			this.$options.methods.initial(this)
			let  i18n = uni.getStorageSync('i18n')
			if(i18n === 'en'){
				uni.setNavigationBarTitle({'title':'App'})
			}
		},


		onPullDownRefresh:function(){
			this.$options.methods.initial(this)
			uni.stopPullDownRefresh()
		},

		methods: {
			async initial(that){
				var productCode = uni.getStorageSync('productCode')
				if (productCode === undefined || productCode === '') {
					uni.reLaunch({
						url: '/pages/first/first'
					})
					return
				}
				var sessionId = uni.getStorageSync('sessionId')
				if (sessionId === undefined || sessionId === '') {
					uni.reLaunch({
						url: '/pages/register/register'
					})
					return
				}
				
				
				var preoptions = {}
				let clientType = uni.getStorageSync('clientType') 
				let tempname = clientType==='pda'?'appsj_leftmenu_pda':'appsj_leftmenu'
				preoptions['pagename'] = tempname
				preoptions['templatename'] = tempname
				preoptions['modid'] = tempname
				preoptions['menuid'] = ''
				that.preoptions = preoptions
				var injson = that.$requestStylePre(preoptions)
				uni.showLoading({title: '加载中'})
				var url = getApp().globalData.app_address + '?method=saas_PageStyle&parse=json'
				const { data: result } = await that.$post2(url, injson);
				console.log(result)
				var div = result.data.div
				for(var i=0; i<div.length; i++){
					var divArea = div[i].divArea
					var style = div[i].style
					var dataObject = style.dataObject
					var replaceConditions = {}
					var divreplaceColumns = style.replaceColumns==undefined?[]:style.replaceColumns
					replaceConditions = that.$replaceConditionstrans(replaceConditions, divreplaceColumns,'','')
					var injson = that.$requestDataPre(that.preoptions,divArea,dataObject,replaceConditions,{},that.pageConditions)
					var url = getApp().globalData.app_address + '?method=saas_PageDivData&parse=json'
					const { data: res } = await that.$post2(url, injson);
					uni.hideLoading()
					if (res.rtn != 1) {
						uni.reLaunch({url: '/pages/first/first'});
						return
					}
					let i18nArr = uni.getStorageSync('i18nArr')
					let i18n = uni.getStorageSync('i18n')
					if (res.data != '') {
						that.commonmod = res.data.div.value
						if (JSON.stringify(that.commonmod) != '[]') {
							var tempcommonmod = that.commonmod
							for (var i = 0; i < tempcommonmod.length; i++) {
								tempcommonmod[i].piciconurl = getApp().globalData.pic_address + tempcommonmod[i].piciconurl
								if(i18n === 'en' && i18nArr!=undefined){
									tempcommonmod[i].menuname = that.$translg(tempcommonmod[i].menuname,i18nArr)
								}
							}
							var id = ''
							var pid = ''
							that.menulist = that.$structureTreeData(tempcommonmod, id = "menuid", pid ="parentmenuid")
							console.log(that.menulist)
							that.menus = that.menulist[0].children
						}
								
					}
									
				}
			},

			swichNav(index) {
				var that = this
				var cur = index;
				if (this.currentTab == cur) {
					return false;
				} else {
					that.currentTab = cur
					that.menus = that.menulist[cur].children
				}
			},
			
			onItemClick(index,index2) {
				var that = this
				try{
					var menu = that.menus[index].children[index2]
				}catch(e){
					var menu = that.menus[index2]
				}
				console.log(menu)
				var templetname = menu.templetname
				var pagename = menu.pagename
				var menuid = menu.menuid
				var menuname = menu.menuname
				var modid = menu.modid
				if(templetname == 'appsj_list'){
					// var url = `/pages/infolist/infolist`
					var url = `/pages/tab/tab`
							 +`?templetname=${templetname}`
							 +`&pagename=${pagename}`
							 +`&menuid=${menuid}`
							 +`&menuname=${menuname}`
							 +`&modid=${modid}`
					uni.navigateTo({url:url})
				}else if(templetname == 'appsj_tab'){
					var url = `/pages/tab/tab`
							 +`?templetname=${templetname}`
							 +`&pagename=${pagename}`
							 +`&menuid=${menuid}`
							 +`&menuname=${menuname}`
							 +`&modid=${modid}`
							 +`&tabs=${JSON.stringify(menu.children)}`
					uni.navigateTo({url:url})
				}
				
			},

		}
	}
</script>

<style>
	.left {width: 25%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0, 0, 0, 0.2);}
	.right {width: 75%;height: 100%;position: fixed;top: 0;right: 0;background: #fff;}
	::-webkit-scrollbar {width: 0;height: 0;color: transparent;}
	.menu {display: flex;}
	.menu.active {color: #E08140;position: relative;background: #ffffff;}
	.menu_left {width: 10rpx;background: #E08140;padding: 30rpx 0 30rpx 0;}
	.menu_text {text-align: center;padding: 30rpx 0 30rpx 0;margin-left: 10rpx;}
	.cq_nav {padding: 20rpx;display: flex;flex-wrap: wrap;justify-content: flex-start;margin-left: -20rpx;margin-right: -20rpx;}
	.cq_nav1 {padding: 20rpx;display: flex;flex-direction: column;justify-content: flex-start;margin-left: -20rpx;margin-right: -20rpx;}
	.cq_nav_item {width: 160rpx;height: 190rpx;display: flex;flex-direction: column;align-content: center;align-items: center;margin-left: 20rpx;}
	.cq_nav_item_image {width: 44px;height: 44px;margin-top: 23rpx;}
	.cq_nav_item_text {color: #333333;margin: 10rpx 0 10rpx 0;white-space:normal; overflow: hidden; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-box-orient: vertical;-webkit-line-clamp: 1;}
</style>
